<ui:composition template="/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:cc="http://sourceforge.net/projects/jsf-comp">

    <ui:define name="styleone">
        <h:form id="fMenu">
            <ul>
                <li><a href="/reservasis/protected/principal.htm" id="linkPrincipal" title="#{bundle.menuPrincipal}">#{bundle.menuPrincipal}</a></li>
                <li><h:commandLink action="#{apartamentoAction.setup}" title="#{bundle.menuApartamento}" value="#{bundle.menuApartamento}"/></li>
                <li><h:commandLink action="#{reservaHospedagemAction.setup}" title="#{bundle.menuReserva}" value="#{bundle.menuReserva}" /></li>
                <li><h:commandLink action="#{hospedeAction.setup}" title="#{bundle.menuHospede}" value="#{bundle.menuHospede}" /></li>
                <li><h:commandLink action="#{cadastroUsuarioAction.setup}" title="#{bundle.menuUsuario}" value="#{bundle.menuUsuario}" class="current"/></li>
                <!--
                <li><a href="/reservasis/protected/recepcionista/recepcionista.htm" id="linkRecepcionista" title="#{bundle.menuRecepcionista}">#{bundle.menuRecepcionista}</a></li>
                -->
                <li><h:commandLink action="#{identity.logout}" value="#{bundle.menuSair}" title="#{bundle.menuSair}" /></li>
            </ul>
        </h:form>
    </ui:define>

    <ui:define name="colunaEsquerda">

    </ui:define>

    <ui:define name="conteudo">
        <br/>
        <center>
            <rich:messages layout="table"
                           errorClass="errorClass"
                           infoClass="infoClass"
                           warnClass="warnClass"
                           styleClass="painelMensagem"
                           ajaxRendered="true"/>
        </center>
        <br/>
        <rich:simpleTogglePanel id="stpPesquisaUsuario" switchType="client">
            <f:facet name="header">
                #{bundle.geralCriteriosPesquisa}
            </f:facet>

            <h:form id="fUsuario">
                <a4j:loadScript  type="text/javascript" src="/resources/scripts/jquery.maskedinput-1.1.4.js" />
                <h:panelGrid cellspacing="2" cellpadding="2" columns="2" columnClasses="field-names, fields">
                    <h:outputLabel for="opNome">
                        <h:outputText value="#{bundle.hospedeNome}: " />
                    </h:outputLabel>

                    <h:inputText id="itNomeUsuario" value="#{cadastroUsuarioAction.paramNome}" label="#{bundle.hospedeNome}" size="50"/>

                    <h:outputLabel for="opCPF">
                        <h:outputText value="#{bundle.hospedeCPF}: "/>
                    </h:outputLabel>

                    <h:inputText id="itCpfUsuario" value="#{cadastroUsuarioAction.paramCPF}" label="#{bundle.hospedeCPF}" size="15" >
                        <rich:jQuery selector="#itCpfUsuario" query="mask('999.999.999-99')" timing="onload"/>
                    </h:inputText>

                </h:panelGrid>
                <br/>
                <a4j:commandLink id="clPesquisar"
                                 status="status"
                                 action="#{cadastroUsuarioAction.pesquisar}"
                                 styleClass="link dr-toolbar-ext rich-toolbar"
                                 reRender="opResultado, dtUsuario">
                    <h:graphicImage value="/resources/images/system-search.png"/>
                    <h:outputText value="#{bundle.botaoPesquisar}" />
                </a4j:commandLink>

                <h:commandLink id="clCriar"
                               immediate="true"
                               action="#{cadastroUsuarioAction.criarSetup}"
                               styleClass="link dr-toolbar-ext rich-toolbar">
                    <h:graphicImage value="/resources/images/icon_user.gif" />
                    <h:outputText value="#{bundle.botaoNovo}" />
                </h:commandLink>
            </h:form>
        </rich:simpleTogglePanel>
        <br/>
        <a4j:outputPanel id="opResultado">
            <a4j:form id="fdtUsuario">
                <rich:dataTable id="dtUsuario"
                                value="#{usuarios}"
                                var="u"
                                width="100%"
                                rows="10"
                                cellpadding="0"
                                cellspacing="0"
                                columnClasses="colunaCentralizada, colunaEsquerda,colunaEsquerda ,colunaEsquerda, colunaCentralizada"
                                columnsWidth="55, 280,40,40,140"
                                onRowMouseOver="this.style.backgroundColor='#EFF7FF'"
                                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
                    <f:facet name="header">
                        #{bundle.usuarios}
                    </f:facet>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.usuarioCPF}
                        </f:facet>
                        #{u.cpf}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.usuarioNome}
                        </f:facet>
                        #{u.nome}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.usuarioLogin}
                        </f:facet>
                        #{u.login}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.usuarioTipo}
                        </f:facet>
                        #{u.tipo}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.geralOpcoes}
                        </f:facet>

                        <a4j:commandLink id="detalhar"
                                         action="#{cadastroUsuarioAction.detalhar}"
                                         styleClass="link"
                                         oncomplete="Richfaces.showModalPanel('mpDetalhar',{});"
                                         reRender="mpDetalhar">
                            <h:graphicImage value="/resources/images/x-office-document.png" />
                            <h:outputText value="#{bundle.botaoDetalhar}" />
                        </a4j:commandLink>

                        <a4j:commandLink id="alterar"
                                         action="#{cadastroUsuarioAction.alterarSetup}"
                                         styleClass="link">
                            <h:graphicImage value="/resources/images/edit-paste.png" />
                            <h:outputText value="#{bundle.botaoAlterar}" />
                        </a4j:commandLink>

                        <a4j:commandLink id="excluir"
                                         action="#{cadastroUsuarioAction.excluir}"
                                         onclick="if (!confirm('Deseja excluir ?'))return false;"
                                         reRender="dtUsuario"
                                         styleClass="link">
                            <h:graphicImage value="/resources/images/user-trash-full.png" />
                            <h:outputText value="#{bundle.botaoExcluir}" />
                        </a4j:commandLink>

                    </rich:column>
                </rich:dataTable>
                <rich:datascroller align="right" for="dtUsuario" boundaryControls="auto" />
            </a4j:form>
        </a4j:outputPanel>

        <rich:modalPanel id="mpDetalhar" autosized="true" width="640">
            <f:facet name="header">
                <h:outputText value="#{bundle.geralDetalhar}" />
            </f:facet>

            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage value="/resources/images/panelClose.png" style="cursor:pointer" id="CLOSE"/>
                    <rich:componentControl for="mpDetalhar" attachTo="CLOSE" operation="hide" event="onclick"/>
                </h:panelGroup>
            </f:facet>

            <br/>
            <h:panelGrid cellspacing="2" cellpading="2" columns="2" columnClasses="field-names, fields">
                <h:outputLabel for="opNome">
                    <h:outputText value="#{bundle.hospedeNome}: " />
                </h:outputLabel>

                <h:outputText id="itNome" value="#{cadastroUsuarioAction.usuario.nome}" styleClass="link"/>

                <h:outputLabel for="opIdentidade">
                    <h:outputText value="#{bundle.hospedeIdentidade}: " />
                </h:outputLabel>

                <h:outputText id="itIdentidade" value="#{cadastroUsuarioAction.usuario.identidade}" styleClass="link"/>

                <h:outputLabel for="opCPF">
                    <h:outputText value="#{bundle.hospedeCPF}: " />
                </h:outputLabel>

                <h:outputText id="itCpfHospede" value="#{cadastroUsuarioAction.usuario.cpf}" styleClass="link" />

                <h:outputLabel for="opTelefone">
                    <h:outputText value="#{bundle.hospedeTelefone}: " />
                </h:outputLabel>

                <h:outputText id="itTelefone" value="#{cadastroUsuarioAction.usuario.telefone}" styleClass="link"/>

                <h:outputLabel for="opLogin">
                    <h:outputText value="#{bundle.usuarioLogin} :" />
                </h:outputLabel>

                <h:outputText id="itLogin" value="#{cadastroUsuarioAction.usuario.login}" styleClass="link" />

                <h:outputText for="opTipo">
                    <h:outputText value="#{bundle.usuarioTipo} :" />
                </h:outputText>

                <h:outputText id="itTipo" value="#{cadastroUsuarioAction.usuario.tipo}" styleClass="link" />
            </h:panelGrid>

            <h:form>
                <a4j:commandLink status="status"
                                 styleClass="link dr-toolbar-ext rich-toolbar"
                                 immediate="true"
                                 onclick="Richfaces.hideModalPanel('mpDetalhar', {});">
                    <h:graphicImage value="/resources/images/dialog-cancel.png"/>
                    <h:outputText value="#{messages.botaoCancelar}" />
                </a4j:commandLink>
            </h:form>
        </rich:modalPanel>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </ui:define>

    <ui:define name="colunaDireita">

    </ui:define>
</ui:composition>